<template>
  <el-container>
    <el-header>
      <h1>用户订单页面</h1>
    </el-header>
    <el-main>
      <el-table
          :data="userForm"
          style="width: 100%">
        <el-table-column
            prop="vname"
            label="名称"
            width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>日期: {{ scope.row.time }}</p>
              <p style="color: red">请在三天后去医院登记</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.vname }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="ostatus"
            label="状态"
            width="90">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "UserOrderList",
  data(){
    return{
      uid:'',
      userForm: null,
      loading: false,
      i:0,
      userFormSize:0
    }
  },
  computed: {
    noMore () {
      return this.i >= this.userFormSize
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods:{
    load () {
      this.loading = true
      setTimeout(() => {
        this.i += 1;
        this.loading = false
      }, 2000)
    },
  },
  mounted() {
    let userMsg = JSON.parse(localStorage.getItem("userManager"))
    this.uid=userMsg.id
    axios({
      url:'http://localhost:88/api/order/order/getOrderByUserId',
      method:'get',
      params:{
        uid:this.uid
      }
    }).then(res => {
      if (res.data.code === 0){
        console.log(res)
        this.userForm = res.data.data
        this.userFormSize = res.data.data.size
      }
    })
  }
}
</script>

<style scoped>
li{
  list-style-type: none;
  height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  margin-top: 20px;
  margin-right: 25px;
}
ul{
  width: 100%;
  position: relative;
  right: 25px;
}
</style>
